<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Widget Palette Dojo Tree Tests</title>

	<!-- CUSTOMIZATION: Make sure "../" URLs for href/src attributes are correct -->
	<link rel="stylesheet" type="text/css" href="../css/testplan.css" />
</head>

<body>
	<div class="navbar">
		<a href="./" title="show directory contents"><code>./</code> (show contents of this directory)</a>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="../" title="show directory contents"><code>../</code> (show contents of parent directory)</a>
	</div>
	<hr />
	<h1 class="test_title">Widget Palette Dojo Tree Tests</h1>
	
	<h2 class="test_section">Drop from widget palette</h2>
	<h3 class="steps_subsection" >Steps</h3>
	<ol class="steps">
		<li>Choose New HTML File from the New menu</li>
		<li>Open the Dojo Controls folder in the Widget palette.</li>
		<li>Drag the Tree widget onto the canvas.</li>
		<li>SmartInput is displayed. It should have a preview area on the left and a node properties area on the 
			right. Since no nodes are selected, everything in the properties area should be disabled.</li>
		<img src="images/treeInitialSmartInput.png">
		<li>Click on the OK button, and the basic tree should show in the page editor something like the following:</li>
		<img src="images/treeInitialInPageEditor.png">
		<li>Save and close the file.</li>
		<li>Reopen the file</li>
		<li>Click on the preview icon in the toolbar. This should open a new browser window and the tree should be displayed as shown in the page editor.</li>
	</ol>
	<h3 class="expectedResults_subsection" >Expected results</h3>
	<ol class="expectedResults">
		<li>See above.</li>
	</ol>
	
	<h2 class="test_section">Adding/rearranging tree nodes</h2>
	<h3 class="steps_subsection" >Steps</h3>
	<ol class="steps">
		<li>Continuing with the file above, double-click on the tree to reopen smart input.</li>
		<li>Select node labeled "1"" and click <b>Remove</b>. The node and its children should be removed from the dialog, leaving node "2" selected.</li>
		<li>Click <b>Remove</b> again. Node "2" and its children should be removed from the tree making the tree empty.</li>
		<li>Click <b>Add Child</b>. A new leaf node should appear labeled <i>New Node 1</i>, and it should be selected.</li>
		<li>Click <b>Add After</b> 4 times. Four siblings of  <i>New Node 1</i> should be added at the top-level, and the last one added 
			should be selected. Your preview tree should look something like:</li>
		<img src="images/treePreviewWithFiveTopLeaves.png">
		<li>Select <i>New Node 2</i> and click <b>Shift Right</b>. <i>New Node 2</i> should now be a child of <i>New Node 1</i></li>
		<li>Select <i>New Node 3</i> and click <b>Shift Right</b> two times. <i>New Node 3</i> should now be a child of <i>New Node 2</i></li>
		<li>Click <b>Add Before</b> 2 times. Two siblings of <i>New Node 3</i> should be added (labeled <i>New Node 6</i> 
			and <i>New Node 7</i>). Your preview tree should look something like:</li>
		<img src="images/treePreviewManipulation1.png">
		<li>With <i>New Node 7</i> still selected click <b>Move Up</b> two times to make it the very first item in the tree.</li>
		<li>With <i>New Node 7</i> still selected click <b>Move Down</b> until it is the very last item in the tree.</li>
		<li>With <i>New Node 7</i> still selected click <b>Add Child</b> twice. This will add <i>New Node 8</i> as a child of <i>New Node 7</i> and 
			<i>New Node 9</i> as a child of <i>New Node 8</i>. The last item added (<i>New Node 9</i>) should be selected.</li>
		<img src="images/treePreviewManipulation2.png">
		<li>Using drag and drop, select <i>New Node 7</i> and drop it on top of <i>New Node 3</i>. <i>New Node 7</i> should now be a child of <i>New Node 3</i> (and
			keep its children).</li> 
		<li>Select <i>New Node 3</i> and click <b>Shift Left</b> twice to make it a top-level node. As <i>New Node 3</i> shift's it should keep its children.</li>
		<img src="images/treePreviewManipulation3.png">
		<li>Using drag and drop, move <i>New Node 4</i> so that it is a child of <i>New Node 2</i>, but before its new sibling <i>New Node 6</i>.</li>
		<li>Using drag and drop, move <i>New Node 5</i> so that it is between <i>New Node 4</i> and <i>New Node 6</i>.</li>
		<img src="images/treePreviewManipulation4.png">
		<li>Click <b>OK</b> to dismiss smart input and the contents of the tree from the preview should appear in the tree within the page editor.</li>
		<li>Save, close, and reopen the file and the content should still be in place.</li>
	</ol>
	<h3 class="expectedResults_subsection" >Expected results</h3>
	<ol class="expectedResults">
		<li>See above. Plus, here are some other things to look for as nodes are added, removed, rearranged:</li>
		<ul>
			<li>Nodes with children should be rendered as folders (e.g., folder icon unless custom icon has been added).</li>
			<li>Nodes without children should be rendered as leaves (e.g., document icon unless custom icon has been added).</li>
			<li>As new nodes are created, the number in the name is an increment of the last one added.
			<li>Toolbar buttons should be enabled/disabled according to selected node and its position in the tree:</li>
			<ul>
				<li><b>Add Child</b> -- always enabled (whether node selected or not)</li>
				<li><b>Add Before</b> -- always enabled if node selected</li>
				<li><b>Add After</b> -- always enabled if node selected</li>
				<li><b>Remove</b> -- always enabled if node selected</li>
				<li><b>Move Up</b> -- always enabled if node selected and it's not at the top of the list</li>
				<li><b>Move Down</b> --  always enabled if node selected and it's not at the bottom of the list</li>
				<li><b>Shift Left</b> -- always enabled if node selected and it's not at the top-level</li>
				<li><b>Shift Right</b> -- always enabled if node selected and there is a node above it on the same level of the tree</li>
				<p>NOTE: "selected node"" in list above means non-root node. And, the root node is only shown if
				the <i>Show Root</i> property is set to true on the tree itself. If the root node is showing, the only
				button that should ever been enabled when it's selected is <b>Add Child</b>.</p>
			</ul>
		</ul>
	</ol>
	
	<h2 class="test_section">Updating node label and icons</h2>
	<h3 class="steps_subsection" >Steps</h3>
	<ol class="steps">
		<li>Continuing with the file above, double-click on the tree to reopen smart input.</li>
		<li>Select <i>New Node 1</i> and notice the <i>Node properties</i> section of the dialog becomes enabled and is populated with
			the values for <i>New Node 1</i>.</li>
		<li>Change the label field from "New Node 1" to "My Fancy Node" and notice the node label in the preview tree is updated as you type.</li>
		<li>Click the <b>...</b> button next to the <i>icon</i> text box and the <i>Select a file dialog</i> will launch.</li>
		<li>Navigate to and choose the sample icon for the closed state (e.g., <i>samples/sample_data/images/close.gif</i>) and notice the icon appears as the node 
		    icon for <i>My Fancy Node</i> in the preview tree. HINT: the text box contents will be too long to see, but you can drag the splitter to the left of the 
		    <i>Node properties</i> area to make it larger.</li>
		<li>Click the <b>...</b> button next to the <i>open icon</i> text box and the <i>Select a file dialog</i> will launch.</li>
		<li>Navigate to and choose the sample icon for the open state (e.g., <i>samples/sample_data/images/open.gif</i>) and 
			notice the icon appears as the node icon for <i>My Fancy Node</i> in the preview tree (replacing the first one because the node is in open state).</li>
		<li>In the preview tree, open and close <i>My Fancy Node</i> and notice the icon changes between open and closed state.</li>
		<li>Select <i>New Node 9</i> and change the label to "My Leaf Node".</li>
		<li>Click the <b>...</b> button next to the <i>icon</i> text box and the <i>Select a file dialog</i> will launch.</li>
		<li>Navigate to and choose the sample icon for leaf nodes (e.g., <i>samples/sample_data/images/leaf.gif</i>) and notice the icon appears as the node 
		    icon for <i>My Leaf Node</i> in the preview tree. Also, notice the field for <i>open icon</i> is disabled because <i>My Leaf Node</i> is a leaf 
		    and cannot be in open state.</li>
		<li>Click <b>OK</b> to dismiss smart input and the contents of the tree from the preview should appear in the tree within the page editor.</li>
		<li>Preview the page and notice the icon change as you open and close <i>My Fancy Node</i>.</li>
	</ol>
	<h3 class="expectedResults_subsection" >Expected results</h3>
	<ol class="expectedResults">
		<li>See above.</li>
	</ol>
	
	<h2 class="test_section">Adding event handling to nodes</h2>
	<h3 class="steps_subsection" >Steps</h3>
	<ol class="steps">
		<li>Continuing with the file above, create a new state in the Scenes view called <i>myState</i>.</li>
		<li>Add an HTML label to the page below the table and change the text to something like "This text will change size on state change."</li>
		<li>Select <i>myState</i> in the Scenes Palette.</li>
		<li>In the Properties Palette, go into Font Properties for the label. Follow the cascade for the size field, check the "Apply to this state only", and change the size to
			something like 50px. The size of the label should change in the page editor.</li>
		<li>Select the <i>Normal</i> state in the Scenes Palette.</li>
		<li>Double-click on the tree to reopen smart input.</li>
		<li>Select <i>New Node 4</i> and change the label to "Normal on click".</li>
		<li>Open the combo box for <i>onclick</i> and notice options for the two states appear (e.g. <i>Normal:State</i> and <i>myState:State</i>). Choose <i>Normal:State</i>.</li>
		<li>Select <i>New Node 5</i> and change the label to "myState on click". Open the combo box for <i>onclick</i> and choose <i>myState:State</i>.</li>
		<li>Select <i>New Node 6</i> and change the label to "myState on dblclick". Open the combo box for <i>ondblclick</i> and choose <i>myState:State</i>.</li>
		<li>Select <i>New Node 3</i> and change the label to "Toggle state on open". Open the combo box for <i>onclose</i> and choose <i>Normal:State</i>. Also, 
			open the combo box for <i>onopen</i> and choose <i>myState:State</i>.</li>
		<li>Click OK and preview the page. NOTE: The preview will initially show <i>myState</i> (e.g., large label) because the 
			<i>onopen</i> handler for <i>Toggle state on open</i> will fire.</li>
		<li>Click the <i>Normal on click</i> node and see the state of the page go back to normal (e.g., label shrinks).</li>
		<li>Click the <i>myState on click</i> node and see the state of the page go to <i>myState</i> (e.g., label grows).</li>
		<li>Click the <i>Normal on click</i> node and see the state of the page go back to normal (e.g., label shrinks).</li>
		<li>Double-click the <i>myState on dblclick</i> node and see the state of the page go to <i>myState</i> (e.g., label grows).</li>
		<li>Close the <i>Toggle state on open</i> node see the state of the page go back to normal (e.g., label shrinks).</li>
		<li>Finally, re-open the <i>Toggle state on open</i> node see the state of the page go to <i>myState</i> (e.g., label grows).</li>
	</ol>
	<h3 class="expectedResults_subsection" >Expected results</h3>
	<ol class="expectedResults">
		<li>See above.</li>
	</ol>
	
	<h2 class="test_section">Changing tree properties</h2>
	<h3 class="steps_subsection" >Steps</h3>
	<ol class="steps">
		<li>Continuing with the file above, select the tree.</li>
		<li>Open Widget-specific properties in the Properties Palette.</li>
		<li>Check the <i>Show Root</i> checkbox. A root node should appear within the tree in the page editor.</li>
		<li>Double-click the tree to bring up smart input. The preview tree should also now show the root node.</li>
		<li>Select the root node (labeled "Root") and notice the only toolbar button enabled is <i>Add Child.</i></li>
		<li>Change the label to something like <i>Root of All Things</i>.</li>
		<li>Click OK to dismiss smart input and root node should be relabeled in the page editor.</li>
		<li>Save, close, reopen file and contents should be the same.</li>
	</ol>
	<h3 class="expectedResults_subsection" >Expected results</h3>
	<ol class="expectedResults">
		<li>See above.</li>
	</ol>
	
	<h2 class="test_section">Editing "legacy" tree (optional)</h2>
	<h3 class="steps_subsection" >Steps</h3>
	<ol class="steps">
		<p><i>Background: Prior to Maqetta's move to Dojo 1.8 (and prior to the addition of visual editing of tree via the smart input described in
			previous sections), the Maqetta tree support used ItemFileReadStore and ForestStoreModel. The newer tree support uses Memory and 
			ObjectStoreModel. An attempt was made to ensure tree smart input still works when it encounters the "legacy" setup, and that is the point
			of this section.</i></p>
		<li>Choose New HTML File from the New menu</li>
		<li>Click "Split Vertically" or "Split Horizontally" in main toolbar to make source pane visible</li>
		<li>Copy and paste the source from <a href="./support_files/treeLegacySample.html">treeLegacySample.html</a> on top of the source in the source pane. 
			(Alternatively, you can upload the file to your workspace.)</li>
		<li>See Tree get rendered and close source pane (e.g., click "Display Design" in main toolbar).</li>
		<li>Double-click the tree to open up smart input. The dialog should look exactly like the screenshot in the first section of this 
			document <i>except</i> that the fields for <i>icon</i> and <i>open icon</i> are hidden (due to limitations with allowable property
			types in ItemFileReadStore).</li>
		<li>Do some amount of tree manipulation (e.g., add nodes, remove nodes, and rearrange nodes) and ensure the preview is updated appropriately.</li>
		<li>Select a couple different nodes and change their labels.</li>
		<li>Select a couples nodes and add JavaScript for different event types (such as, <i>alert("click!")</i> for the <i>onClick</i> event)
		<li>Click OK to dismiss smart input. The tree in the page editor should look like it did in the preview.</li>
		<li>Save, close, reopen the file.</li>
		<li>Preview the file and ensure your event handlers run.</li>
	</ol>
	<h3 class="expectedResults_subsection" >Expected results</h3>
	<ol class="expectedResults">
		<li>See above.</li>
	</ol>
</body>
</html>
